<template>
  <div class="container relative">
    <div class="mescroll" ref="mescroll">
      <div class="mescroll-wrapper">
        <div class="goods-wrapper" id="goodswrapper">
          <GoodsItem
            :parentData="item"
            :parentStyle="selfStyle"
            @childEvent="goForGoodsDetail"
            v-for="(item,index) in dataList"
            :key="index"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入mescroll
import MeScroll from "mescroll.js";
import "mescroll.js/mescroll.min.css";
import GoodsItem from "./selfItem.vue";
import { getGoodsListApi } from "@/apis/privateApi.js";
export default {
  name: "secondShop",
  components: { GoodsItem },
  data() {
    return {
      selfStyle: {}, //传入组件样式
      mescroll: null, //滚动器
      pageImgArr: {}, //页面图片
      dataList: [], //页面数据数组
      tagId:null,//请求id
      pageSize:20,
      hasNext:true,
    };
  },
  created() {
    let pageInfo = this.locationFindParam();
    document.title = decodeURIComponent(pageInfo.title);
    this.tagId=pageInfo.name;//赋值页面请求id
    this.initPageImg();
  },
  mounted() {
    let that = this;
    this.mescroll = new MeScroll(that.$refs.mescroll, {
      up: {
        auto: true,
        callback: this.upCallback,
        page: { num: 0, size: that.pageSize },
        noMoreSize: 3,
        htmlNodata: `<div class="deadline upwarp-nodata"><span>亲，我们是有底线哦~</span><span class="line"></span></div>`,
        toTop: { src: that.pageImgArr.toTop, offset: 1000 },
        empty:{
          warpId: "goodswrapper", 
					icon: "http://www.mescroll.com/demo/res/img/mescroll-empty.png",
					tip: "暂无相关数据~" 
        }
      }
    });
  },
  methods: {
    initPageImg() {
      this.pageImgArr = {
        toTop: require("../../../assets/img/publicImg/totop.png")
      };
    },
    goForGoodsDetail(id) {
      this.$navtiveUtils.jump2goods(id);
    },
    goForSpecialDetail(id) {
      this.$navtiveUtils.jump2special(id);
    },
    upCallback(page) {
      let that = this;
      this.getListDataFromNet(
        page.num,
        page.size,
        successData => {
          if (page.num == 1) { that.dataList = [];} //刷新时清空数据
          that.dataList = that.dataList.concat(successData);
          that.$nextTick(() => {
            //传入当前页面数据与是否有下一页
            //这里传入page.size为了防止请求失效商品返回的长度与请求不一致造成已经是最后一页的假象。所以不会出现暂无数据的提示了。
            if(that.dataList.length==0){
              that.mescroll.endSuccess(0);
            }else{
              that.mescroll.endSuccess(page.size, that.hasNext);
            }
          });
        },
        error => { this.mescroll.endErr(); }
      );
    },
    getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
      let params={ tagId:this.tagId, page:pageNum, pageSize:pageSize };
      getGoodsListApi(params)
      .then(res => {
        let resData = res.goodsList.goods;//接口返回的数据
        this.hasNext = res.goodsList.hasNext ? true : false ;//判断是否还有下一页
        successCallback && successCallback(resData);//调用成功回调
      })
      .catch(error => {
        errorCallback && errorCallback(); //调用失败回调
      });
    },
    locationFindParam() {
      let temp = window.location.search.replace("?", "").split("&");
      let pageName = { name: "", title: "" };
      let name = temp.forEach((item, index) => {
        if (item.includes("pageName=")) { pageName.name = item.split("=")[1]; }
        if (item.includes("title=")) { pageName.title = item.split("=")[1];}
      });
      return pageName;
    }
  },
  destroyed() {
    this.mescroll.destroy();
  }
};
</script>
<style lang="less">
.mescroll-upwarp.mescroll-hardware {
  padding: 0;
}
.mescroll-empty{
  padding-top: 1rem;
  font-size: 0.3rem;
  text-align: center;
  img{
    display: inline-block;
    width: 3rem;height: 3rem;
    margin-bottom: 0.4rem; 
  }
}
.deadline {
  font-size: 0.28rem;
  text-align: center;
  .line {
    display: block;
    width: 2.6rem;
    height: 0.08rem;
    margin: 0.25rem auto 0;
    border-radius: 0.08rem;
    background: #000;
  }
}
</style>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
}
.mescroll {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  background: #F5F5F9;
  // &::-webkit-scrollbar{width: 0;height: 0;}
}
.relative {
  position: relative;
}
.goods-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0.1rem;
}
</style>